<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { nextTick, onMounted } from "vue";
import { searchDataKqzy } from "@/api/search";
import { addOrUpdateKqzy } from "@/api/addOrUpdate";

const editorRef = shallowRef();
const editorRef1 = shallowRef();

const valueHtml = ref(
  "<p>被支援单位：XX。<br/>支援单位：某某市。<br/>支援任务：XX。<br/>①抢险抢修专业队<br/>专业队类型：重要目标抢修专业队。<br/>支援人数：XX人。<br/>牵头单位：XX。<br/>组建单位：XX。<br/>携带战斗装具：电力抢修车辆XX台，工程车XX台，特种车辆XX台，其余各类抢修设施XX套。<br/>②医疗救护专业队<br/>专业队类型：医疗救护专业队。<br/>支援人数：XX人。<br/>牵头单位：XX<br/>组建单位：XX<br/>携带战斗装具：救护车XX台及各种急救设备等设备设施。<br/>③消防专业队<br/>专业队类型：消防专业队。<br/>支援人数：XX人。<br/>牵头单位：XX<br/>组建单位：XX<br/>携带战斗装具：空气呼吸机XX部，各型消防车XX台，消防战斗服XX套等设备设施。<br/>④治安专业队<br/>专业队类型：治安专业队。<br/>支援人数：XX人。<br/>牵头单位：XX<br/>组建单位：XX<br/>携带战斗装具：防暴车XX台，高压水枪防暴车XX台，警车XX台，武器装备及防弹衣XX件套等设备设施。<br/>⑤防化防疫专业队<br/>专业队类型：防化专业队、洗消专业队。<br/>支援人数：XX人。<br/>牵头单位：XX<br/>组建单位：XX<br/>携带战斗装具：卫生监督车XX台、消杀车XX台、电动喷雾器XX台、手动喷雾器XX台，防护服XX套，防毒面具XX个、手套XX副、应急防护装备包XX套、污物桶XX个、漂白精粉XX桶等设备设施。<br/>⑥通信专业队<br/>专业队类型：通信专业队。<br/>支援人数：XX人。<br/>牵头单位：XX<br/>组建单位：XX<br/>携带战斗装具：450兆25W对讲机（车载台）XX副，手机电话XX部等设备设施。<br/>⑦运输专业队<br/>专业队类型：物资、人员运输专业队。<br/>支援人数：XX人。<br/>牵头单位：XX<br/>组建单位：XX<br/>携带战斗装具：配备装备大客车XX辆，平车XX辆、货车XX辆等设备设施。</p>"
);
const valueHtml1 = ref(
  "<p>①被支援单位：萨尔图区<br/>支援单位：XX<br/>支援任务：重要目标抢修、医疗救护、消防、治安、防化防疫、通信、运输。<br/>专业队名称：XX<br/>支援人数：XX人。<br/>牵头单位：XX<br/>②被支援单位：让胡路区<br/>支援单位：XX<br/>支援任务：重要目标抢修、医疗救护、消防、治安、防化防疫、通信、运输。<br/>专业队名称：XX<br/>支援人数：XX人<br/>牵头单位：XX<br/>③被支援单位：龙凤区<br/>支援单位：XX<br/>支援任务：重要目标抢修、医疗救护、消防、治安、防化防疫、通信、运输。<br/>专业队名称：XX<br/>支援人数：XX人<br/>牵头单位：XX<br/>④被支援单位：红岗区、大同区<br/>支援单位：XX<br/>支援任务：重要目标抢修、医疗救护、消防、治安、防化防疫、通信、运输。<br/>专业队名称：XX<br/>支援人数：XX人<br/>牵头单位：XX</p>"
);
const toolbarConfig = {};
const toolbarConfig1 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};

const mode = ref("default");
const mode1 = ref("default");

// 加载html
const initHtml = () => {
  searchDataKqzy({ m: "任务需求-支援任务分区" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "跨区支援任务区分")?.v || "";
    valueHtml1.value =
      data.find((x) => x.k === "辖区内单位跨行政区支援任务区分")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateKqzy({
      m: "任务需求-支援任务分区",
      data: [
        {
          k: "跨区支援任务区分",
          v: valueHtml.value,
        },
        {
          k: "辖区内单位跨行政区支援任务区分",
          v: valueHtml1.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  if (!editor) return;
  if (!editor1) return;
  editor.destroy();
  editor1.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="跨区支援任务区分" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="辖区内单位跨行政区支援任务区分" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>